<template>
    <div style="height:100%; width: 100%" class="dataCenter">
        <div class="dataCenter-cell">
            <group>
                <h3>
                    <cell title="加油数据"></cell>
                </h3>
            </group>
            <div class="dataCenter-full">
                <div class="dataCenter-list" style="margin-right:7.5px;">
                    <div class="dataCenter-list-label">加油总金额(元)</div>
                    <div class="dataCenter-list-number">{{sysInfo.fuelAmount ? sysInfo.fuelAmount : 0}}</div>
                </div>
                <div class="dataCenter-list" style="margin-left:7.5px;">
                    <div class="dataCenter-list-label">加油总量(L)</div>
                    <div class="dataCenter-list-number">{{sysInfo.fuelCharge}}</div>
                </div>
            </div>
            <div style="display:flex">
                <x-button style="margin:0 20px;flex:1" @click.native="$router.push('fuelData')">查看更多</x-button>
            </div>
        </div>
        <div class="dataCenter-cell">
            <group>
                <h3>
                    <cell title="充值数据"></cell>
                </h3>
            </group>
            <div class="dataCenter-full">
                <div class="dataCenter-list" style="margin-right:7.5px;">
                    <div class="dataCenter-list-label">充值总金额(元)</div>
                    <div class="dataCenter-list-number">{{sysInfo.totalCharge ? sysInfo.totalCharge : 0}}</div>
                </div>
                <div class="dataCenter-list" style="margin-left:7.5px;">
                    <div class="dataCenter-list-label">充值总笔数(L)</div>
                    <div class="dataCenter-list-number">{{sysInfo.chargeCount}}</div>
                </div>
            </div>
            <div style="display:flex">
                <x-button style="margin:0 20px;flex:1" @click.native="$router.push('rechargeData')">查看更多</x-button>
            </div>
        </div>
        <bar selected="dataCenter"></bar>
    </div>
</template>

<script>
    import {
        Group,
        Cell,
        XButton
    } from 'vux'
    import bar from '../../components/bar.vue'
    export default {
        name: 'dataCenter',
        components: {
            Group,
            Cell,
            XButton,
            bar
        },
        data: function () {
            return {
                sysInfo: {}
            }
        },
        created: function () {
            this.$ajax(
                'mch/sysInfo',
                {},
                (content) => {
                    this.sysInfo = content
                })
        }
    }

</script>

<style lang="less">
    .dataCenter-cell:first-child {
        margin-top: 0px;
        .weui-cells {
            margin-top: 0px !important;
        }
    }

</style>
